<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app>ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        width: 100px;
        height: 50px;
        background-color: white;
        text-align: center;
    }
    
    .active {
        background-color: red !important;
        color: white !important;
    }
    
    #app {
        height: 5%;
        width: 100%;
        background-color: white;
        border-bottom: 2px solid red;
    }
    
    body {
        margin: 0;
        font-family: "微软雅黑";
        font-weight: bolder;
        background-color: gainsboro;
    }
    
    a {
        display: inline-block;
        line-height: 50px;
        /* 设置行高度与行内高度一致，可使a标签文本垂直居中显示 */
        width: 100%;
        height: 50px;
        color: rgb(55, 51, 58);
        text-decoration-line: none;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        <ul>
            <li v-for="(item, index) in list" :key="item.id" @click="activeIndex=index">
                <!-- :class=“{类名： 表达式（返回布尔值）}” ，切换类的启用状态-->
                <!-- :class="[类名1,类名2,类名3]"，添加多个样式 -->
                <a :class="{active:index===activeIndex}" href="#">{{item.name}}</a>
            </li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                activeIndex: -1,
                list: [{
                    id: 1,
                    name: "京东秒杀"
                }, {
                    id: 2,
                    name: "每日特价"
                }, {
                    id: 3,
                    name: "品类秒杀"
                }, ],
                classList: [{
                    active: true
                }]
            },
        })
    </script>
</body>

</html>